<template>
  <div class ="main-pm">
    <div class="main-top">
      <el-form ref="form" :model="form" label-width="52px" :inline="true">

        <div class="filtrate">
          <el-form-item label="人员号码" prop='msisdn'>
            <el-input v-model="form.msisdn" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="人员分组" prop='group'>
            <el-select v-model="form.group" placeholder="请选择分组">
              <el-option v-for='items in groupInfo' :key='items.groupId' :label="items.groupName" :value="items.groupId"></el-option>
            </el-select>
          </el-form-item>
          <el-date-picker
            v-model="timer"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <div class="button">
            <el-button type="primary" @click="queryInfo" size="small" icon="el-icon-search">查询</el-button>
            <!--<el-button @click="exportExcel" size="small" icon="el-icon-upload2">导出</el-button>-->
            <el-button size="small" icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
          </div>
        </div>
      </el-form>


    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="font-size: 13px;"
        :header-cell-style="tableHeader">
        <el-table-column
          fixed
          label="人员名称"
          width="250"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-if="scope.row.personId==editId" v-model="scope.row.personName"></el-input>
            <span>{{scope.row.personName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="msisdn"
          label="人员号码"
          width="250">
        </el-table-column>
        <el-table-column
          prop="groupName"
          label="分组"
          :show-overflow-tooltip="true"
          width="250">
          <template slot-scope="scope">
            <span v-if="scope.row.groupName == null">暂未分组</span>
            <span>{{scope.row.groupName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="offLineCount"
          label="离线总次数"
          width="250">
        </el-table-column>

      </el-table>
    </div>
    <div class="main-bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  // export const onLine = {'1':'正常', '2':'暂停', '3':'无效'};
  import {dateFormat,chgStrToDate} from '@/base/utils.js'

  export default {
    name: "LocateStatistics",
    data() {

      return {
        props: {
          value: 'groupId',
          label: 'groupName',
          multiple: true,
        },
        checkAll: false,
        tableData: [],
        groupInfo: [],
        currentPage: 1,
        tableHeader: {
          backgroundColor: '#E1F1FF',
          color: '#4389D6'
        },
        form: {
          name: '',
          msisdn: '',
          group:'',
          state:'',
          flag:'2'
        },
        page: 1,
        currentPage1: 1,
        limit: '',
        total: '',//表格内容条数
        editId:'',  //判断编辑的是哪一行
        editData:[],  //编辑行初始数据
      }
    },
    methods:{
      handleCheckAllChange(val) {
        this.checkedUsers = val ? this.users : [];
        this.isIndeterminate = false;
      },
      handlecheckedUsersChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.users.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.users.length;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val;
        this.qryData()
      },
      queryInfo(){
        this.currentPage1 = 1;
        this.qryData();
      },
      // 查询操作员所管理的组成员
      qryData(){
        let url= '/lbs/usercenter/memberMag/h5QryMemberInfo';
        let params = {
          personName: this.form.name,
          personMsisdn: this.form.msisdn,
          groupId: this.form.group,
          state: this.form.state,
          flag:'2',
          page: this.page,
          limit: this.limit
        }
        this.$http.post(url,params).then(res =>{
          let {retCode,retMsg,pageData,total} = res.data;
          if (retCode === '0'){
            this.total = total;
            pageData.forEach(items => {
              items.efftTime = dateFormat(chgStrToDate(items.efftTime),'yyyy/MM/dd');
              items.operTime = dateFormat(chgStrToDate(items.operTime),'yyyy/MM/dd hh:mm:ss');
            });
            this.tableData = pageData;
            console.log(this.tableData);
          }else {
            this.$message({
              type: "error",
              message: retMsg,
            });
          }
        })
      },
      // 查询操作员所属分组信息
      qryGroupInfo(){
        let url= '/lbs/usercenter/memberMag/h5QryGroupInfo';
        this.$http.post(url).then(res =>{
          let {retCode,retMsg,data} = res.data;
          if (retCode === '0'){
            this.groupInfo = data.groupInfoList;
          }
        })
          .catch(response => {
            this.$message({
              type: "error",
              message: response,
            });
          })
      },
      //搜索条件重置
      resetForm() {
        this.$refs.form.resetFields();
      },
      //成员名称修改
      changeClick(row) {
        if(this.editId != ''){
          this.$message({
            message: '请先保存',
            type: 'warning'
          });
          return
        }
        this.editData = row.personName    //把当前行数据存一份，取消的时候行数据还原
        this.editId = row.personId;
      },
      //取消编辑
      cancelClick(row) {
        this.editId = '';
        row.personName = this.editData;
      },
      //保存修改
      saveClick(row) {
        let url = '/lbs/usercenter/memberMag/h5EditMemberName';
        let params = {
          memberId: row.personId,
          memberName: row.personName
        }
        this.$http.post(url, params).then(res => {
          let {retCode,retMsg,data} = res.data;
          if (retCode == '0') {//成功的情况
            this.$message({
              type: 'success',
              message: '修改成功',
            })
          } else {
            row.personName = this.editData;
            this.$alert(retMsg || '请求失败');
          }
          this.editId = '';
        }).catch(err => {
          this.$message({
            type: 'error',
            message: err,
          });
        })
      },
      /*changeColor(state){
        if (state == 1){
          return 'active';
        }
      }*/
    },
    created() {
      this.qryGroupInfo();
    },
    mounted() {
      this.limit = parseInt((document.getElementsByClassName('table')[0].clientHeight-68)/48);
      this.qryData();
    }
  }
</script>

<style scoped lang="less">
  .main-pm{
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    background: #FFF;
    border-radius: 0 16px 16px 0;
    display: flex;
    flex-direction: column;
    min-width: 1000px;
  }
  .table {
    flex: 1;
    /*border-bottom: 1px solid #EEEEEE;*/
  }
  .cokumnActive{
    color: red;
  }
  /deep/.el-date-editor .el-range__icon {
    line-height: 20px;
  }
  /deep/.el-date-editor .el-range-separator {
    line-height: 19px;
  }
  /deep/.el-date-editor--daterange {
    width: 240px!important;
    margin: 0 20px 0 10px;
  }
</style>

<style lang="less">
  .main-pm {
    .main-top {
      background: #FBFBFB;
      border-bottom: 1px solid #EEEEEE;
      /*display: flex;*/
    }

    .main-top .el-form-item__label {
      font-size: 12px;
      padding: 0 4px 0 0px;
      text-align: unset;
      margin: 0 0 0 5px;
    }

    .main-top .el-input {
      font-size: 12px;
    }

    .main-top .el-input__inner {
      height: 32px !important;
      width: 138px;
    }

    .main-top main-state {
      /*height: 26px!important;*/
      width: 75px;
      padding: 0 6px;
    }

    /*  .mian-top el-input__inner{
      height: 26px;
      width: 103px;
    }*/

    .main-top .el-form-item {
      /*background: #1BCDA5;*/
      font-size: 12px;
      display: inline-flex;
      margin: 6px 2px 16px 12px;
      height: 30px;
    }

    .el-select-dropdown__item {
      height: 31px;
      line-height: 31px;
      font-size: 13px;
    }

    .main-top .el-button {
      font-size: 13px;
    }

    .main-top .el-button + .el-button {
      margin-left: 3px;
    }

    .main-top .el-form {
      display: flex;
    }

    .el-scrollbar {
      max-height: 200px;
      overflow: scroll;
    }

    .el-table {
      margin: 15px 20px;
      width: auto;
      border-bottom: #EEE;
      /*width: inherit;*/
    }

    .el-table .cell {
      text-align: center;
    }

    .main-bottom {
      border-top: 1px solid #EEEEEE;

    }

    .main-bottom .el-pagination {
      margin: 10px 0 10px 0;
      text-align: center;
    }

    .main .cell .el-button--small {
      padding: 0;
    }

    .main .cell .el-input__inner {
      height: 28px;
    }

    .filtrate {
      height: 62px;
      background: #FBFBFB;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      border-radius: 0 16px 0 0;
    }

    /*.el-select__tags {
      flex-wrap: nowrap;
      overflow: hidden; // 滚动条
    }*/

    /*.fin-select__tags-text {
      display: inline-block;
      //根据自己的需要调整文字宽度
      max-width: 15px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }*/

    //根据自己需要调整叉号的位置
    /*.fin-select .fin-tag__close.fin-icon-close {
      top: -5px;
      right: -4px;
    }*/
  }
</style>
